<template>

  <div class="center">
    <div class="listBox" v-for="item in list">
      <div class="imgBox">
        <img :src="item.avatar" alt="">
      </div>
      <div class="cenBox">
        <div class="title"><span style="font-size: 16px;color: black;margin-right: 5px;">{{ item.name }}</span>
          {{ item.depName }}&nbsp;|&nbsp;{{ item.positionalTitles }}</div>

        <div class="title">
          <button class="btn">三级</button>
          {{ item.hospitalName }}

        </div>
        <div class="major">
          {{ item.major }}
          <p><van-icon style="color: #fadb14;" name="star" /> <span style="color: #fadb14;">{{ item.score }}</span> /接诊数
            <span style="color: #fadb14;">{{ item.consultationNum
              }}</span></p>

           <span class="serviceFee">￥{{ item.serviceFee }}</span>
           <button>问医生</button>
        </div>
      </div>

    </div>
    <p style="text-align: center;font-size: 12px;color: #999999;">没有更多了</p>
  </div>

</template>

<script setup lang="ts">
import type { rowss } from '@/types/types';

defineProps<{
  list: rowss[]
}>()
</script>

<style lang="scss" scoped>
.center {
  width: 100%;
  flex: 1;
  .listBox {
    width: 96%;

    padding: 12px 2%;
    display: flex;

    .imgBox {
      width: 50px;
      height: 50px;
      border-radius: 50px;
      margin-right: 5px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50px;
      }
    }

    .cenBox {
      flex: 1;
      overflow: hidden;
      overflow: auto;
      // margin-top: 7px;
      font-size: 12px;

      .title {
        width: 100%;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #A0A0A0;

        .btn {
          width: 40px;
          padding: 0;
          border: none;
          background-color: #677FFF;
          color: white;
          border-radius: 2px
        }
      }
    }

    .butBox {
      width: 55px;
      height: 30px;
      margin-top: 15px;
      border: none;
      border-radius: 20px;
      background-color: #E9F7F6;
      color: #37B9AA;
    }
  }
}

.major {
  width: 100%;
  padding: 5px 0;
  color: #939393;
  .serviceFee{
    font-size: 16px;
    color: #37B9AA;
    font-weight: 700;
  }
  button{
    float: right;
     width: 60px;
     height: 23px;
    border-radius: 20px;
    color: #37B9AA;
    background-color: #e9f7f6;
    border: none;
  }
}
</style>
